{% block sw_order_detail_base_order_overview %}
<mt-card
    class="sw-order-user-card"
    position-identifier="sw-order-user-card"
    :title="$tc('sw-order.detailBase.cardTitleDetails')"
    :is-loading="isLoading"
>

    {% block sw_order_detail_base_address_modal %}
    <sw-order-address-modal
        v-if="addressBeingEdited"
        :countries="countries"
        :address="addressBeingEdited"
        :order="currentOrder"
        :version-context="versionContext"
        @address-select="onAddressModalAddressSelected"
        @reset="onResetOrder"
        @save="onAddressModalSave"
        @error="$emit('error')"
    />
    {% endblock %}

    <template #grid>
        <sw-container rows="auto auto">

            {% block sw_order_user_card_row_primary %}
            <sw-card-section divider="bottom">

                {% block sw_order_user_card_metadata_container %}
                <sw-container
                    columns="80px 1fr max-content"
                    gap="0px 30px"
                    align="center"
                    class="sw-order-user-card__container"
                >

                    {% block sw_order_user_card_avatar %}
                    <sw-avatar
                        size="80px"
                        color="$route.meta.$module.color"
                        :first-name="currentOrder.orderCustomer.firstName"
                        :last-name="currentOrder.orderCustomer.lastName"
                    />
                    {% endblock %}

                    {% block sw_order_user_card_metadata %}
                    <div class="sw-order-user-card__metadata">
                        {% block sw_order_user_card_metadata_user_name %}
                        <div
                            v-if="currentOrder.orderCustomer"
                            class="sw-order-user-card__metadata-user-name"
                        >
                            {{ fullName }}
                        </div>
                        {% endblock %}
                        {% block sw_order_user_card_metadata_tags %}

                        <sw-entity-tag-select
                            v-if="isEditing || hasTags"
                            class="sw-order-user-card__tag-select"
                            :placeholder="$tc('sw-order.detailBase.placeholderTagSelect')"
                            :size="!isEditing ? 'default' : 'medium'"
                            :disabled="!isEditing"
                            :entity-collection="currentOrder.tags"
                            @item-add="onAddTag"
                            @item-remove="onRemoveTag"
                        />
                        {% endblock %}
                    </div>
                    {% endblock %}

                    {% block sw_order_detail_base_info_summary %}
                    <div class="sw-order-user-card__info-summary">
                        {% block  sw_order_detail_base_info_summary_entries %}
                        <div class="sw-order-user-card__metadata-price">
                            {{ currencyFilter(currentOrder.amountTotal, currentOrder.currency.isoCode) }}
                        </div>

                        <div class="sw-order-user-card__metadata-item">
                            {{ orderDate }}
                        </div>
                        {% endblock %}
                    </div>
                    {% endblock %}

                </sw-container>
                {% endblock %}

                <slot name="additional-actions">
                    {% block sw_order_user_card_slot_additional_actions %}{% endblock %}
                </slot>

                {% block sw_order_detail_base_order_overview_columns %}
                <sw-container
                    columns="repeat(auto-fit, minmax(250px, 1fr))"
                    gap="30px 30px"
                >

                    {% block sw_order_detail_base_order_overview_left_column %}
                    <sw-description-list
                        columns="1fr"
                        grid="1fr"
                        class="sw-order-user-card__summary-vertical"
                    >

                        {% block sw_order_detail_base_order_overview_email %}
                        <dt>{{ $tc('sw-order.detailBase.labelCustomerEmail') }}*</dt>
                        <dd>
                            <sw-order-inline-field
                                v-model:value="currentOrder.orderCustomer.email"
                                :display-value="currentOrder.orderCustomer.email ? currentOrder.orderCustomer.email : $tc('sw-order.detailBase.labelNoEmail')"
                                required
                                :editable="isEditing"
                                @update:value="$emit('order-change')"
                            />
                        </dd>
                        {% endblock %}

                        {% block sw_order_detail_base_order_overview_billing_address %}
                        <dt>
                            {{ $tc('sw-order.detailBase.headlineBillingAddress') }}
                            <mt-button
                                v-if="isEditing"
                                class="sw-order-user-card__address-edit-button"
                                size="small"
                                variant="secondary"
                                @click="onEditBillingAddress"
                            >
                                {{ $tc('sw-order.detailBase.buttonEditAddress') }}
                            </mt-button>
                        </dt>
                        <dd
                            role="button"
                            tabindex="0"
                            @click="onEditBillingAddress"
                            @keydown.enter="onEditBillingAddress"
                        >
                            <sw-address
                                :address="billingAddress"
                                :formatting-address="formattingAddress"
                            />
                        </dd>
                        {% endblock %}

                        {% block sw_order_detail_base_order_overview_left_column_slot %}
                        {% endblock %}

                    </sw-description-list>
                    {% endblock %}

                    {% block sw_order_detail_base_order_overview_right_column %}
                    <sw-description-list
                        columns="1fr"
                        grid="1fr"
                        class="sw-order-user-card__summary-vertical"
                    >

                        {% block sw_order_detail_base_order_overview_phone_number %}
                        <dt>
                            {{ $tc('sw-order.detailBase.labelCustomerPhoneNumber') }}
                            <sw-label
                                v-if="hasDifferentBillingAndShippingAddress"
                                size="small"
                                appearance="pill"
                                class="sw-order-user-card__address-phone-label"
                            >
                                {{ $tc('sw-order.detailBase.headlineBillingAddress') }}
                            </sw-label>
                        </dt>
                        <dd>
                            <sw-order-inline-field
                                v-model:value="billingAddress.phoneNumber"
                                :display-value="billingAddress.phoneNumber? billingAddress.phoneNumber : $tc('sw-order.detailBase.labelNoPhoneNumber')"
                                :editable="isEditing"
                                class="sw-order-inline-field__truncateable"
                                @update:value="$emit('order-change')"
                            />
                        </dd>
                        {% endblock %}

                        {% block sw_order_detail_base_order_overview_shipping_address %}
                        <dt>
                            {{ $tc('sw-order.detailBase.headlineDeliveryAddress') }}
                            <mt-button
                                v-show="hasDifferentBillingAndShippingAddress && isEditing"
                                class="sw-order-user-card__address-edit-button"
                                size="small"
                                variant="secondary"
                                @click="onEditDeliveryAddress"
                            >
                                {{ $tc('sw-order.detailBase.buttonEditAddress') }}
                            </mt-button>
                        </dt>

                        <dd v-if="!hasDifferentBillingAndShippingAddress && hasDeliveries">
                            <span>
                                {{ $tc('sw-order.detailBase.labelSameDeliveryAndBillingAddress') }}
                            </span>
                            <mt-button
                                v-show="!hasDifferentBillingAndShippingAddress && isEditing"
                                class="sw-order-user-card__address-add-button"
                                size="small"
                                block
                                variant="secondary"
                                @click="onAddNewDeliveryAddress"
                            >
                                {{ $tc('sw-order.detailBase.buttonAddDeliveryAddress') }}
                            </mt-button>
                        </dd>

                        <dd
                            v-else-if="hasDeliveries"
                            role="button"
                            tabindex="0"
                            @click="$emit('onEditDeliveryAddress',$event)"
                            @keydown.enter="$emit('onEditDeliveryAddress',$event)"
                        >
                            <sw-address
                                :address="delivery.shippingOrderAddress"
                                :formatting-address="formattingAddress"
                            />
                        </dd>

                        <dd v-else>
                            {{ $tc('sw-order.detailBase.labelNoDeliveriesYet') }}
                        </dd>
                        {% endblock %}

                        {% block sw_order_detail_base_order_overview_right_column_slot %}
                        {% endblock %}

                    </sw-description-list>
                    {% endblock %}

                </sw-container>
                {% endblock %}

            </sw-card-section>
            {% endblock %}

            {% block sw_order_user_card_row_secondary %}
            <sw-card-section
                secondary
                slim
            >

                {% block sw_order_detail_base_secondary_info_order_overview %}
                <sw-container
                    columns="repeat(auto-fit, minmax(250px, 1fr))"
                    gap="30px 30px"
                >

                    {% block sw_order_detail_base_secondary_info_order_overview_contents %}
                    <sw-description-list
                        columns="1fr"
                        grid="1fr"
                        class="sw-order-user-card__summary-vertical"
                    >

                        {% block sw_order_detail_base_secondary_info_order_overview_left_column %}

                        {% block sw_order_detail_base_secondary_info_sales_channel %}
                        <dt>{{ $tc('sw-order.detailBase.labelSalesChannel') }}</dt>
                        <dd class="sw-order-base__label-sales-channel">
                            {{ currentOrder.salesChannel.translated.name }}
                        </dd>
                        {% endblock %}

                        {% block sw_order_detail_base_secondary_info_payment %}
                        <template v-if="currentOrder.transactions.length > 0">
                            <dt>{{ $tc('sw-order.detailBase.labelPaymentMethod') }}</dt>
                            <dd>
                                {{ currentOrder.transactions.last().paymentMethod.translated.distinguishableName }}
                            </dd>
                        </template>
                        {% endblock %}

                        {% block sw_order_detail_base_secondary_info_delivery %}
                        <dt>{{ $tc('sw-order.detailBase.labelShippingMethod') }}</dt>
                        <dd>{{ hasDeliveries ? delivery.shippingMethod.translated.name :$tc('sw-order.detailBase.labelNoDeliveriesYet') }}</dd>
                        {% endblock %}

                        {% block sw_order_detail_base_secondary_info_affiliate %}
                        <dt>{{ $tc('sw-order.detailBase.labelAffiliateCode') }}</dt>
                        <dd>{{ currentOrder.affiliateCode || '-' }}</dd>
                        {% endblock %}

                        {% block sw_order_detail_base_secondary_info_order_overview_left_column_slot %}
                        {% endblock %}

                        {% endblock %}
                    </sw-description-list>

                    <sw-description-list
                        columns="1fr"
                        grid="1fr"
                        class="sw-order-user-card__summary-vertical"
                    >
                        {%  block sw_order_detail_base_secondary_info_order_overview_right_column %}

                        {% block sw_order_detail_base_secondary_info_order_language %}
                        <dt>{{ $tc('sw-order.detailBase.labelLanguage') }}</dt>
                        <dd>{{ currentOrder.language.name }}</dd>
                        {% endblock %}

                        {% block sw_order_detail_base_secondary_info_last_change %}
                        <dt>{{ $tc('sw-order.detailBase.labelLastChange') }}</dt>
                        <dd>{{ lastChangedDate }}</dd>
                        {% endblock %}

                        {% block sw_order_detail_base_secondary_info_tracking_codes %}
                        <template v-if="isEditing && delivery">
                            {% block sw_order_detail_base_secondary_info_tracking_codes_input %}
                            <dt>
                                {% block sw_order_detail_base_secondary_info_tracking_codes_input_label %}
                                {{ $tc('sw-order.detailBase.labelTrackingCodes') }}
                                {% endblock %}
                            </dt>
                            <dd>
                                {% block sw_order_detail_base_secondary_info_tracking_codes_input_content %}
                                <sw-multi-tag-select
                                    v-model:value="delivery.trackingCodes"
                                    class="sw-order-user-card__tracking-code-select"
                                    :placeholder="$tc('sw-order.detailBase.placeholderTrackingCodeSelect')"
                                    @update:value="emitChange"
                                >
                                    <template #message-add-data>
                                        <span>{{ $tc('sw-order.detailBase.addTrackingCode') }}</span>
                                    </template>
                                    <template #message-enter-valid-data>
                                        <span>{{ $tc('sw-order.detailBase.enterValidTrackingCode') }}</span>
                                    </template>
                                </sw-multi-tag-select>
                                {% endblock %}
                            </dd>
                            {% endblock %}
                        </template>
                        <template v-else-if="delivery">
                            {% block sw_order_detail_base_secondary_info_tracking_codes_display %}
                            <dt>
                                {% block sw_order_detail_base_secondary_info_tracking_codes_display_label %}
                                {{ $tc('sw-order.detailBase.labelTrackingCodes') }}
                                {% endblock %}
                            </dt>
                            <dd>
                                {% block sw_order_detail_base_secondary_info_tracking_codes_display_content %}
                                <mt-button
                                    v-for="trackingCode in delivery.trackingCodes"
                                    :key="trackingCode"
                                    class="sw-order-user-card__tracking-code-link"
                                    size="x-small"
                                    :link="renderTrackingUrl(trackingCode, delivery.shippingMethod)"
                                    :disabled="!renderTrackingUrl(trackingCode, delivery.shippingMethod)"
                                    variant="secondary"
                                >{{ trackingCode }}</mt-button>
                                {% endblock %}
                            </dd>
                            {% endblock %}
                        </template>
                        <template v-else>
                            {% block sw_order_detail_base_secondary_info_tracking_codes_empty %}
                            <dt>
                                {% block sw_order_detail_base_secondary_info_tracking_codes_empty_label %}
                                {{ $tc('sw-order.detailBase.labelTrackingCodes') }}
                                {% endblock %}
                            </dt>
                            <dd>
                                {% block sw_order_detail_base_secondary_info_tracking_codes_empty_content %}
                                <span>-</span>
                                {% endblock %}
                            </dd>
                            {% endblock %}
                        </template>
                        {% endblock %}

                        {% block sw_order_detail_base_secondary_info_campaign %}
                        <template v-if="currentOrder.campaignCode">
                            <dt>{{ $tc('sw-order.detailBase.labelCampaignCode') }}</dt>
                            <dd>{{ currentOrder.campaignCode || '-' }}</dd>
                        </template>
                        {% endblock %}

                        {% block sw_order_detail_base_secondary_info_order_overview_right_column_slot %}
                        {% endblock %}

                        {% endblock %}

                    </sw-description-list>
                    {% endblock %}

                </sw-container>
                {% endblock %}

            </sw-card-section>
            {% endblock %}

        </sw-container>
    </template>
</mt-card>

{% endblock %}
